<template>
<div style="background-color: white;height: 100%">
  <div class="head">
    <div  class="select">
      <p >考试名称：</p>
      <el-select v-model="value" placeholder="请选择">
        <el-option
            v-for="item in dataList"
            :key="item.testId"
            :label="item.testName"
            :value="item.testId">
        </el-option>
      </el-select>
    </div>
  </div>
  <div class="body" >
    <div style="height: 40%">
    <DataViewA1 style="height: 100%" v-bind:class-id="value" v-if="value"></DataViewA1>
    </div>
    <div style="height: 58%;margin-top: 1%">
      <div style="width: 50%;display: inline-flex;height: 100%;float: left">
        <DataViewB1 v-bind:class-id="value" style="height: 100%;width: 100%" v-if="value"></DataViewB1>
      </div>
      <div style="width: 50%;display: inline-flex;height: 100%;float: right">
          <DataViewB2 style="height: 100%;width: 100%" v-bind:class-id="value" v-if="value"></DataViewB2>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import DataViewA1 from "@/components/analysis/DataViewA1";
import DataViewB1 from "@/components/analysis/DataViewB1";
import DataViewB2 from "@/components/analysis/DataViewB2";
export default {
  name: "Analysis",
  components: {DataViewB2, DataViewB1, DataViewA1},
  data(){
      return{
        value:'',
        dataList:[],
      }
  },
  methods:{

  },
  mounted() {
    this.$axios.get('/getAllTest').then(res=>{this.dataList=res.data})
  }
}
</script>

<style scoped>
.head{
  height: 10%;
  background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));
}
.body{
  height: 89%;
  margin-top:0.5%;

}
.select{
  display: inline-flex;
  margin: 10px;
  float: left;
}
.select>p{
  font-size: 24px;
}
</style>
